<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>line_polygon_polyline</title>
</head>
<html>
<body>
    <!-- 绘制线条 -->
    <svg width="300" height="300">
        <line x="0" y="0" x2="500" y2="500" stroke="red" storke-width="3"/>
    </svg>
    <br/>

    <!-- 绘制三角形 -->
    <svg width="500" height="500">
        <polygon points="10,10,500,250,250,400" stroke="blue" stoke-width="2" fill="yellow"/>
    </svg>
    <br/>

    <!-- 绘制多边形 -->
    <svg width="500" height="500">
        <polygon points="10,10,500,250,350,300,200,300" stroke="blue" stoke-width="2" fill="yellow"/>
    </svg>
    <br/>

    <!-- 绘制五角星 -->
    <svg width="500" height="500">
        <polygon points="250,0,300,150,500,150,400,350,450,500,250,400,100,500,150,350,0,150,150,150" stroke="blue" stoke-width="2" fill="yellow"/>
        <polygon points="100,10,160,198,10,78,198,78,40,198" fill="lime" stroke="purple" stroke-width="5"/>
    </svg>
    <br/>

    <!-- 绘制 线条-折线图 -->
    <svg width="500" height="200">
        <polyline points="20,20 40,25 60,40 80,120 120,140 200,180 " stroke="yellow" stroke-width="3" fill="none"/>
    </svg>
    <br/>

    <!-- 绘制楼梯图 -->
    <svg width="500" height="200">
        <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" stroke="black" stroke-width="5" fill="none"/>
    </svg>
</body>
</html>